<template>
	<view>
		<uni-nav-bar :fixed="true" @clickLeft="handleBack" left-icon="back" statusBar="true" title="卖书给岛上有家书店"></uni-nav-bar>

		<view class="cu-card no-card case">
			<view class="cu-item shadow">
				<view class="cu-bar search">
					<view class=" flex margin-left-sm justify-center align-center text-lg text-black">
						<view class=" ">联系
							<view class="">方式</view>
						</view>
						<view class="text-black text-lg"> ：</view>
					</view>
					<view class="search-form  padding-left-sm">
						<input @input="bindConaction" type="text" placeholder="微信号/电话号码" placeholder-class="text-gray" />
					</view>
				</view>
			</view>

			<view class="cu-item shadow">
				<view class="cu-bar search">
					<view class=" flex margin-left-sm justify-center align-center text-lg text-black">
						<view class=" ">地址</view>
						<view class="text-black text-lg"> ：</view>
					</view>
					<view class="search-form  padding-left-sm">
						<input @input="bindDormBuildNo" type="text" placeholder="宿舍楼号、宿舍号" placeholder-class="text-gray" />
					</view>
				</view>
			</view>

			<view class="cu-item shadow">
				<view class="cu-bar search">
					<view class=" flex margin-left-sm justify-center align-center text-lg text-black">
						<view class=" ">姓名</view>	
						<view class="text-black text-lg"> ：</view>
					</view>
					<view class="search-form  padding-left-sm">
						<input @input="bindName" type="text" placeholder="联系人姓名" placeholder-class="text-gray" />
					</view>
				</view>	
			</view>

			<!-- <view class="cu-item shadow">
				<view class="cu-bar search flex justify-end margin-bottom margin-top-xs" style="width: 720rpx;">
					<view class="padding padding-top-xs padding-left-sm solids basis-xl bg-gray">
						<input @input="bindNameAndDormNo" type="text" placeholder="联系人姓名、宿舍号" placeholder-class="text-gray" />
					</view>
				</view>
			</view> -->

		</view>

		<view class="cu-bar margin-top bg-white solids-bottom">
			<view class="action text-black text-lg">
				<text>时间</text>
			</view>
			<view class="action" @click="show_time" :style="visible?'transform:rotate(180deg); transition:0.5s':''">
				<text class="cuIcon-rounddown text-yellow" style="transform: scale(1.5);"></text>
			</view>
		</view>


		<picker-view @change="bindTime" v-if="visible" :indicator-style="indicatorStyle">
			<picker-view-column>
				<view class="" v-for="(item,index) in hour" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class=" text-yellow text-lg text-bold">:</view>
			</picker-view-column>
			<picker-view-column>
				<view class="" v-for="(item,index) in min" :key="index">{{item}}</view>
			</picker-view-column>

		</picker-view>


		<view class="cu-bar margin-top solids-bottom bg-white">
			<view class=" ">
				<text class="cuIcon-title text-yellow"></text>
				<text class="text-black text-lg"> 共{{totCount}}本</text>
			</view>
		</view>
		<view class="box">
			<view class="cu-list menu menu-avatar goods-list">


				<view class="animation-fade" style="pointer-events: auto;">

					<!-- <my-bookList  @toDetail="toDetail" @onDelete="onDelete" :totPrice.sync="totPrice" :totCount.sync="totCount" :saleBooks.sync="saleBooks" :allChoosed.sync="allChoosed"></my-bookList> -->
					<view class="cu-card no-card">
						<view class=" shadow  solids-bottom cu-item cf content padding-right-sm" v-for="(item,index) in saleBooks" :key="item.img">

							<!-- 左边 -->
							<view class="fl flex " style="width: fit-content;">
								<!-- 书本图片 -->
								<view class="image padding">
									<image style="width: 100rpx;height: 130rpx;" :src="item.img"></image>
								</view>

							</view>

							<!-- 右边 -->
							<view class="">
								<!-- 右边的上面 -->
								<view style="height: 170rpx;" class=" margin-top flex justify-between">
									<view>
										<view class="text-black" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;">
											<text>{{item.bookName}}</text>
										</view>
										<view class="text-gray text-sm">{{item.author}}</view>
									</view>

									<view class="">
										<view class="text-price margin-right-xl text-black text-lg">{{item.price}}</view>
										<view class="margin-top-xl">共{{item.bookNum}}本</view>
									</view>
								</view>
							</view>
						</view>
					</view>


				</view>

				<!-- foot -->
				<view class="myfoot">
					<view class="" style="height:250rpx;"></view>

					<view style="z-index: 1;" class="foot cu-bar flex justify-center padding-sm padding-bottom-lg bg-white">

						<button id='submitBtn' @click="handleSubmit" class="cu-btn bg-yellow text-white round padding-lg text-lg" style="width: 500rpx;">确认提交</button>
					</view>

				</view>

			</view>






			<uni-popup ref="showImg" type="center" :maskClick="false">
				<view class="flex justify-center align-center flex-direction">
					<image style="width: 400rpx;" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/H8c7601b627784057b958acf1d7f58083a.jpg"></image>
					<image style="width: 500rpx; margin-top: -80rpx;" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/Hff58d6e31eb54e4999cda3521799d303K.jpg"></image>
				</view>
				<view class="flex justify-center">

					<button @click="backToIndex" style="width: 280rpx; margin-top: -50rpx;" class="lg cu-btn bg-yellow text-white text-center round">我知道了</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			const hour = []
			for (let i = 9; i <= 18; i++) {
				hour.push(i)
			}
			return {
				conaction: '',
				dormBuildNo: '',
				name: '',
				hour,
				visible: false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				min: ["00", "30"],
				saleBooks: [],
				userInfo: {},
				time: '9:00',
				totCount:0
			}
		},
		onLoad() {
			this.saleBooks = uni.getStorageSync("cart");
			console.log(this.saleBooks);
			for(var index in this.saleBooks){
				this.totCount+=Number(this.saleBooks[index].bookNum)
			}
		},
		methods: {

			bindTime(e) {
				// console.log(e.detail.value);
				// console.log(this.hour[e.detail.value[0]]+':'+this.min[e.detail.value[2]]);
				this.time = this.hour[e.detail.value[0]] + ':' + this.min[e.detail.value[2]];
			},

			bindDormBuildNo(e) {
				this.dormBuildNo = e.detail.value;
			},

			bindName(e) {
				this.name = e.detail.value;
			},

			bindConaction(e) {
				this.conaction = e.detail.value;
			},

			handleSubmit() {
				if (this.conaction.length == 0) {
					uni.showModal({
						title: '提示',
						content: '请填写联系方式',
						showCancel: false
					})
				}
				
				else if(this.dormBuildNo.length == 0){
					uni.showModal({
						title: '提示',
						content: '请填写地址',
						showCancel: false
					})
				}
				
				else if(this.name.length == 0){
					uni.showModal({
						title: '提示',
						content: '请填写姓名',
						showCancel: false
					})
				}

				else{
					this.userInfo.conaction = this.conaction;
					this.userInfo.dorm = this.dormBuildNo;
					this.userInfo.name = this.name;
					this.userInfo.time = this.time;
					// console.log(this.userInfo);
					this.$refs["showImg"].open();
				}



				
			},
			
			backToIndex(){
				uni.reLaunch({
					url:'../index/index'
				})
			},

			hideModal() {
				this.$refs["showImg"].close();

			},

			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			show_time() {
				this.visible = !this.visible
			}
		}
	}
</script>

<style>
	.box {
		position: absolute;
		width: 100%;
	}

	.canui-kong {
		padding-top: 100rpx;
	}

	.canui-kong-icon {
		width: 260rpx;
		height: 260rpx;
		line-height: 220rpx;
		margin: 0 auto;
		border-radius: 200rpx;
		margin-bottom: 30rpx;
	}

	.canui-kong-icon text {
		font-size: 160rpx;
	}

	.canui-kong .bg-gradual-green {
		margin: 0 auto;
	}

	.cu-list.menu-avatar>.cu-item {
		padding-left: 220rpx;
	}




	uni-picker-view {
		display: block;
	}

	uni-picker-view .uni-picker-view-wrapper {
		display: flex;
		position: relative;
		overflow: hidden;
		height: 100%;
		background-color: white;
	}

	uni-picker-view[hidden] {
		display: none;
	}

	picker-view {
		width: 100%;
		height: 300upx;
		/* margin-top:10upx; */
	}

	picker-view-column {
		line-height: 100upx;
		text-align: center;
	}
</style>
